<template>
  <div class="archives-page-container">
    <h2 class="section-title">文章归档</h2>
    <div class="archive-timeline">
      <el-timeline>
        <el-timeline-item
          v-for="archive in allArchives"
          :key="archive"
          @click="selectArchive(archive)"
        >
          {{ archive }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-pagination
      v-if="selectedArchive"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalArticles"
    ></el-pagination>
    <div class="articles-container" v-if="selectedArchive">
      <div
        class="article-card"
        v-for="article in articlesByArchive"
        :key="article.id"
        @click="goToArticleDetail(article.id)"
      >
        <div class="article-image-container">
          <img :src="article.coverImage" alt="文章封面" />
        </div>
        <div class="article-info">
          <h4 class="article-title">{{ article.title }}</h4>
          <p class="article-introduction">{{ article.introduction }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allArchives: [],
      selectedArchive: null,
      articlesByArchive: [],
      currentPage: 1,
      pageSize: 10,
      totalArticles: 0
    };
  },
  mounted() {
    this.getAllArchives();
  },
  methods: {
    getAllArchives() {
      this.$axios.get('/article/timeArchives').then(response => {
        if (response.data.code === 200) {
          this.allArchives = response.data.data;
        }
      });
    },
    selectArchive(archive) {
      this.selectedArchive = archive;
      this.currentPage = 1;
      this.getArticlesByArchive();
    },
    getArticlesByArchive() {
      this.$axios.get(`/article/archiveType/${this.selectedArchive}?pageNum=${this.currentPage}&pageSize=${this.pageSize}`).then(response => {
        if (response.data.code === 200) {
          this.articlesByArchive = response.data.data;
          this.totalArticles = response.data.total;
        }
      });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getArticlesByArchive();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getArticlesByArchive();
    },
    goToArticleDetail(articleId) {
      this.$router.push({ name: "ArticleDetail", params: { articleId } });
    }
  }
};
</script>

<style scoped>
.archives-page-container {
  padding: 30px;
  display: flex;
  gap: 30px;
}

.archive-timeline {
  width: 200px;
}

.articles-container {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.article-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s;
  transform: scale(var(--scale, 1));
  position: relative;
}

.article-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  transform: scale(var(--scale, 1.03));
}

.article-image-container {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.article-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-info {
  padding: 20px;
}

.article-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.article-introduction {
  font-size: 14px;
  color: #606266;
  margin-bottom: 0;
}
</style>